<template>
  <div>
    <el-input v-model="searchQuery" placeholder="搜索药品" @input="fetchDrugs"></el-input>
    <el-table :data="drugs" style="width: 100%">
      <!-- 显示药品图片的列 -->
      <el-table-column label="图片">
        <template #default="{ row }">
          <!-- 使用 el-image 预览药品图片 -->
          <div class="demo-image__preview">
            <el-image
                style="width: 100px; height: 100px"
                :src="getImageUrl(row.imageUrl)"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="4"
                fit="cover"
                @click="handleImageClick(row)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="药品名称"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button class="fixed-width-button" type="primary" size="small" @click="addToCartHandler(row)">加入购物车</el-button>
          <!-- 图片上传按钮 -->
          <el-upload
              action="http://localhost:8080/upload"
              :data="{ 'drugId': row.id }"
              :on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, row)"
              :show-file-list="false">
            <el-button class="fixed-width-button" size="small" type="success">上传图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框显示大图 -->
    <el-dialog :visible="dialogVisible" @update:visible="dialogVisible = $event" width="50%">
      <img :src="selectedImageSrc" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import { getDrugs, searchDrugs } from '@/api/drug';
import { addToCart } from '@/api/cart';
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";

export default {
  name: 'DrugList',
  setup() {
    const searchQuery = ref('');
    const drugs = ref([]);
    const dialogVisible = ref(false);
    const selectedImageSrc = ref('');

    // 处理图片URL
    const getImageUrl = (imageUrl) => {
      console.log("目前imageUrl:", imageUrl);
      const defaultImageUrl = 'http://localhost:8080/image/default.png'; // 设置默认图片路径
      return imageUrl ? `http://localhost:8080/image/${imageUrl}` : defaultImageUrl;
    };

    const fetchDrugs = async (query) => {
      if (query) {
        drugs.value = await searchDrugs(query);
      } else {
        drugs.value = await getDrugs();
      }
    };

    watch(searchQuery, fetchDrugs);

    const addToCartHandler = async (drug) => {
      const cartItem = {
        userId: 1,
        drugId: drug.id,
        quantity: 1,
      };
      await addToCart(cartItem);
      ElMessage.success('成功加入购物车！');
    };

    // 处理文件上传成功
    const handleUploadSuccess = (response, file, fileList, row) => {
      //打印
      console.log(response,file,fileList,row);
      ElMessage.success('文件上传成功');
      // 刷新药品列表或进行其他适当的操作
    };

    // 处理图片点击事件
    const handleImageClick = (row) => {
      selectedImageSrc.value = getImageUrl(row.imageUrl);
      dialogVisible.value = true;
    };

    fetchDrugs(searchQuery.value);

    return {
      searchQuery,
      drugs,
      addToCartHandler,
      handleUploadSuccess,
      getImageUrl,
      fetchDrugs,
      dialogVisible,
      selectedImageSrc,
      handleImageClick,
    };
  },
};
</script>

<style>

.fixed-width-button {
  width: 90px;
}
</style>
